<template>
    <div class="import-btn">
        <el-upload
            :action="`${baseUrl}${api}`"
            :show-file-list="false"
            :on-preview="preview"
            :on-remove="remove"
            :on-exceed="exceed"
            :on-success="success"
            :on-error="error"
            :on-change="onchange"
            :before-upload="beforeUpload"
            :before-remove="beforeRemove"
            :headers="headers"
            :limit="limit"
            :multiple="multiple"
            :file-list="fileList"
            :disabled="loading"
        >
            <el-button
                :loading="loading"
                type="warning"
                icon="el-icon-bottom"
                size="mini"
                plain
                >导入</el-button
            >
        </el-upload>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
    props: {
        api: String,
        multiple: Boolean,
        limit: {
            type: Number,
            default: 3,
        },
    },
    data: () => {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            fileList: [],
            loading: false,
        };
    },
    methods: {
        // 点击文件列表中已上传的文件时的钩子
        preview() {},
        // 文件列表移除文件时的钩子
        remove() {},
        // 文件上传成功时的钩子
        success(a, b, c) {
            this.fileList = [];
            this.$message.success("导入成功");
            this.loading = false;
            this.$emit("success", a, b, c);
        },
        // 文件上传失败时的钩子
        error() {
            this.fileList = [];
            this.$message.success("导入失败");
            this.loading = false;
        },
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        onchange() {},
        // 上传文件之前的钩子
        beforeUpload() {
            this.loading = true;
        },
        // 删除文件之前的钩子
        beforeRemove() {},
        // 文件超出个数限制时的钩子
        exceed() {},
    },
};
</script>

<style lang="scss" scoped>
.import-btn {
}
</style>